<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <!-- 
        条件渲染 总结：
            v-if 在切换过程中，条件块内的事件监听器和子组件适当的销毁和重建
                    如果初始渲染时条件为假,则什么也不做,直到条件第一次变为真时才会开始渲染条件块
            v-show 在切换过程中,只修改display的值
                    不管初始条件是真/假,元素总会被渲染,并且只是简单地基于CSS进行切换

            如果需要非常频繁地切换,则使用v-show比较好;
            如果在运行时条件变化少,则使用v-if比较好。

            通过template元素来进行元素分组,一个组的多个元素使用同一个条件渲染
                template必须搭配v-if使用,v-show无法搭配使用
     -->
     
    <div id ="app">

        <!-- 使用v-show做条件渲染(支持bool值/可以转换成bool值的表达式) -->
        <h2 v-show="false">欢迎来到{{name}}</h2>

        <!-- 使用v-if做条件渲染(支持bool值/可以转换成bool值的表达式) -->
        <h2 v-if="false">欢迎来到{{name}}</h2>
        <h2 v-else-if="false">你好</h2>
        <h2 v-else>尚硅谷</h2>

        <!-- 
            如何使用条件渲染多个元素？ 
                通过template将多个元素组成一个模板,必须搭配v-if使用
        -->
        <template v-if="true">
            <div>你好!</div>
            <div>你好!!</div>
            <div>你好!!!</div>
        </template>

    </div>

    <script>
        //创建Vue实例,得到 ViewModel
        const vm = new Vue({
            el: '#app',
            // 自定义属性
            data: {
                name:'尚硅谷'
            },
            // 自定义计算属性
            computed: {},
            // 自定义方法
            methods: {}
        });
    </script>
</body>
</html>